WebCodecs வீடியோஃபிரேம் ப்ளேன்: வீடியோ ஃபிரேம் டேட்டாவை அணுகுவதற்கான ஒரு ஆழமான பார்வை

WebCodecs ஆனது இணைய அடிப்படையிலான மீடியா செயலாக்கத்தில் ஒரு முன்னுதாரண மாற்றத்தை பிரதிபலிக்கிறது. இது மீடியாவின் அடிப்படைக் கூறுகளுக்கு குறைந்த-நிலை அணுகலை வழங்குகிறது, டெவலப்பர்கள் நேரடியாக உலாவியில் அதிநவீன பயன்பாடுகளை உருவாக்க உதவுகிறது. WebCodecs-இன் மிகவும் சக்திவாய்ந்த அம்சங்களில் ஒன்று VideoFrame ஆப்ஜெக்ட் ஆகும், மேலும் அதற்குள், வீடியோ ஃபிரேம்களின் மூல பிக்சல் டேட்டாவை வெளிப்படுத்தும் VideoFrame ப்ளேன்கள் உள்ளன. இந்த கட்டுரை மேம்பட்ட வீடியோ கையாளுதலுக்காக VideoFrame ப்ளேன்களைப் புரிந்துகொள்வதற்கும் பயன்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது.

VideoFrame ஆப்ஜெக்ட்டைப் புரிந்துகொள்ளுதல்

ப்ளேன்களுக்குள் செல்வதற்கு முன், VideoFrame ஆப்ஜெக்ட்டை நினைவு கூர்வோம். ஒரு VideoFrame என்பது வீடியோவின் ஒரு தனி ஃபிரேமைக் குறிக்கிறது. இது டீகோட் செய்யப்பட்ட (அல்லது என்கோட் செய்யப்பட்ட) வீடியோ டேட்டாவை, நேரமுத்திரை, கால அளவு மற்றும் வடிவமைப்பு தகவல் போன்ற தொடர்புடைய மெட்டாடேட்டாவுடன் உள்ளடக்கியுள்ளது. VideoFrame API பின்வரும் செயல்களுக்கான முறைகளை வழங்குகிறது:

• பிக்சல் டேட்டாவைப் படித்தல்: இங்குதான் ப்ளேன்கள் வருகின்றன.
• ஃபிரேம்களை நகலெடுத்தல்: ஏற்கனவே உள்ளவற்றிலிருந்து புதிய VideoFrame ஆப்ஜெக்ட்களை உருவாக்குதல்.
• ஃபிரேம்களை மூடுதல்: ஃபிரேம் வைத்திருக்கும் அடிப்படைகளை விடுவித்தல்.

VideoFrame ஆப்ஜெக்ட் டீகோடிங் செயல்முறையின் போது, பொதுவாக ஒரு VideoDecoder மூலம் அல்லது ஒரு தனிப்பயன் ஃபிரேமை உருவாக்கும் போது கைமுறையாக உருவாக்கப்படுகிறது.

வீடியோஃபிரேம் ப்ளேன்கள் என்றால் என்ன?

ஒரு VideoFrame-இன் பிக்சல் டேட்டா பெரும்பாலும் பல ப்ளேன்களாக ஒழுங்கமைக்கப்படுகிறது, குறிப்பாக YUV போன்ற வடிவங்களில். ஒவ்வொரு ப்ளேனும் படத்தின் வெவ்வேறு கூறுகளைக் குறிக்கிறது. உதாரணமாக, ஒரு YUV420 வடிவத்தில், மூன்று ப்ளேன்கள் உள்ளன:

• Y (Luma): படத்தின் பிரகாசத்தை (luminance) குறிக்கிறது. இந்த ப்ளேன் கிரேஸ்கேல் தகவலைக் கொண்டுள்ளது.
• U (Cb): நீல-வேறுபாடு குரோமா கூறுகளைக் குறிக்கிறது.
• V (Cr): சிவப்பு-வேறுபாடு குரோமா கூறுகளைக் குறிக்கிறது.

RGB வடிவங்கள், எளிமையானதாகத் தோன்றினாலும், சில சமயங்களில் பல ப்ளேன்களைப் பயன்படுத்தலாம். ப்ளேன்களின் எண்ணிக்கை மற்றும் அவற்றின் பொருள் முற்றிலும் VideoFrame-இன் VideoPixelFormat-ஐப் பொறுத்தது.

ப்ளேன்களைப் பயன்படுத்துவதன் நன்மை என்னவென்றால், அது குறிப்பிட்ட வண்ணக் கூறுகளின் திறமையான அணுகலையும் கையாளுதலையும் அனுமதிக்கிறது. உதாரணமாக, நீங்கள் வண்ணத்தை (U மற்றும் V ப்ளேன்கள்) பாதிக்காமல், பிரகாசத்தை (Y ப்ளேன்) மட்டும் சரிசெய்ய விரும்பலாம்.

வீடியோஃபிரேம் ப்ளேன்களை அணுகுதல்: API

VideoFrame API ப்ளேன் டேட்டாவை அணுக பின்வரும் முறைகளை வழங்குகிறது:

• copyTo(destination, options): VideoFrame-இன் உள்ளடக்கத்தை ஒரு இலக்குக்கு நகலெடுக்கிறது, இது மற்றொரு VideoFrame, ஒரு CanvasImageBitmap, அல்லது ஒரு ArrayBufferView ஆக இருக்கலாம். options ஆப்ஜெக்ட் எந்த ப்ளேன்கள் நகலெடுக்கப்பட வேண்டும் மற்றும் எப்படி என்பதை கட்டுப்படுத்துகிறது. இது ப்ளேன் அணுகலுக்கான முதன்மை வழிமுறையாகும்.

copyTo முறையில் உள்ள options ஆப்ஜெக்ட், வீடியோ ஃபிரேம் டேட்டாவிற்கான தளவமைப்பு மற்றும் இலக்கை குறிப்பிட உங்களை அனுமதிக்கிறது. முக்கிய பண்புகள் பின்வருமாறு:

• format: நகலெடுக்கப்பட்ட டேட்டாவின் விரும்பிய பிக்சல் வடிவம். இது அசல் VideoFrame-ஐப் போலவே இருக்கலாம் அல்லது வேறு வடிவமாக இருக்கலாம் (எ.கா., YUV-லிருந்து RGB-க்கு மாற்றுதல்).
• codedWidth மற்றும் codedHeight: வீடியோ ஃபிரேமின் அகலம் மற்றும் உயரம் பிக்சல்களில்.
• layout: நினைவகத்தில் ஒவ்வொரு ப்ளேனின் தளவமைப்பை விவரிக்கும் ஆப்ஜெக்ட்களின் வரிசை. வரிசையில் உள்ள ஒவ்வொரு ஆப்ஜெக்ட்டும் குறிப்பிடுவது:
• offset: டேட்டா பஃபரின் தொடக்கத்திலிருந்து ப்ளேனின் டேட்டாவின் தொடக்கத்திற்கான ஆஃப்செட், பைட்டுகளில்.
• stride: ப்ளேனில் உள்ள ஒவ்வொரு வரிசையின் தொடக்கத்திற்கும் இடையிலான பைட்டுகளின் எண்ணிக்கை. பேடிங்கைக் கையாள்வதற்கு இது முக்கியமானது.

ஒரு YUV420 VideoFrame-ஐ ஒரு ரா பஃபருக்கு நகலெடுப்பதற்கான ஒரு உதாரணத்தைப் பார்ப்போம்:

asynce function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 has 3 planes: Y, U, and V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Important to release resources
}

விளக்கம்:

• width மற்றும் height-ஐ அடிப்படையாகக் கொண்டு ஒவ்வொரு ப்ளேனின் அளவையும் கணக்கிடுகிறோம். Y முழு ரெசல்யூஷனில் உள்ளது, அதேசமயம் U மற்றும் V ஆகியவை சப்-சாம்பிள் செய்யப்பட்டுள்ளன (4:2:0).
• layout வரிசை நினைவக தளவமைப்பை வரையறுக்கிறது. offset ஒவ்வொரு ப்ளேனும் பஃபரில் எங்கு தொடங்குகிறது என்பதைக் குறிப்பிடுகிறது, மற்றும் stride அந்த ப்ளேனில் அடுத்த வரிசைக்குச் செல்ல எத்தனை பைட்டுகள் தாவ வேண்டும் என்பதைக் குறிப்பிடுகிறது.
• format விருப்பம் 'I420' ஆக அமைக்கப்பட்டுள்ளது, இது ஒரு பொதுவான YUV420 வடிவமாகும்.
• முக்கியமாக, நகலெடுத்த பிறகு, வளங்களை விடுவிக்க videoFrame.close() அழைக்கப்படுகிறது.

பிக்சல் வடிவங்கள்: சாத்தியக்கூறுகளின் உலகம்

VideoFrame ப்ளேன்களுடன் பணிபுரிய பிக்சல் வடிவங்களைப் புரிந்துகொள்வது அவசியம். VideoPixelFormat ஆனது வீடியோ ஃபிரேமிற்குள் வண்ணத் தகவல் எவ்வாறு குறியாக்கம் செய்யப்பட்டுள்ளது என்பதை வரையறுக்கிறது. நீங்கள் சந்திக்கக்கூடிய சில பொதுவான பிக்சல் வடிவங்கள் இங்கே:

• I420 (YUV420p): ஒரு பிளானர் YUV வடிவம், இதில் Y, U, மற்றும் V கூறுகள் தனித்தனி ப்ளேன்களில் சேமிக்கப்படுகின்றன. U மற்றும் V ஆகியவை கிடைமட்ட மற்றும் செங்குத்து பரிமாணங்களில் 2 காரணியால் சப்-சாம்பிள் செய்யப்படுகின்றன. இது மிகவும் பொதுவான மற்றும் திறமையான வடிவமாகும்.
• NV12 (YUV420sp): ஒரு அரை-பிளானர் YUV வடிவம், இதில் Y ஒரு ப்ளேனிலும், U மற்றும் V கூறுகள் இரண்டாவது ப்ளேனிலும் ஒன்றோடொன்று இணைக்கப்பட்டு சேமிக்கப்படுகின்றன.
• RGBA: சிவப்பு, பச்சை, நீலம் மற்றும் ஆல்ஃபா கூறுகள் ஒரே ப்ளேனில் சேமிக்கப்படுகின்றன, பொதுவாக ஒரு கூறுக்கு 8 பிட்கள் (ஒரு பிக்சலுக்கு 32 பிட்கள்). கூறுகளின் வரிசை மாறுபடலாம் (எ.கா., BGRA).
• RGB565: சிவப்பு, பச்சை மற்றும் நீல கூறுகள் ஒரே ப்ளேனில் 5 பிட்கள் சிவப்புக்கும், 6 பிட்கள் பச்சைகக்கும், 5 பிட்கள் நீலத்திற்கும் (ஒரு பிக்சலுக்கு 16 பிட்கள்) சேமிக்கப்படுகின்றன.
• GRAYSCALE: ஒவ்வொரு பிக்சலுக்கும் ஒற்றை லூமா (பிரகாசம்) மதிப்புடன் கிரேஸ்கேல் படங்களைக் குறிக்கிறது.

VideoFrame.format பண்பு உங்களுக்கு ஒரு குறிப்பிட்ட ஃபிரேமின் பிக்சல் வடிவத்தைக் கூறும். ப்ளேன்களை அணுக முயற்சிக்கும் முன் இந்த பண்பை சரிபார்க்கவும். ஆதரிக்கப்படும் வடிவங்களின் முழுமையான பட்டியலுக்கு நீங்கள் WebCodecs விவரக்குறிப்பைப் பார்க்கலாம்.

நடைமுறை பயன்பாட்டு வழக்குகள்

VideoFrame ப்ளேன்களை அணுகுவது உலாவியில் மேம்பட்ட வீடியோ செயலாக்கத்திற்கான பரந்த அளவிலான சாத்தியக்கூறுகளைத் திறக்கிறது. இதோ சில உதாரணங்கள்:

1. நிகழ்நேர வீடியோ விளைவுகள்

நீங்கள் VideoFrame-இல் உள்ள பிக்சல் டேட்டாவைக் கையாளுவதன் மூலம் நிகழ்நேர வீடியோ விளைவுகளைப் பயன்படுத்தலாம். உதாரணமாக, ஒரு RGBA ஃபிரேமில் ஒவ்வொரு பிக்சலின் R, G, மற்றும் B கூறுகளை சராசரி எடுத்து, பின்னர் மூன்று கூறுகளையும் அந்த சராசரி மதிப்புக்கு அமைப்பதன் மூலம் ஒரு கிரேஸ்கேல் வடிப்பானைச் செயல்படுத்தலாம். நீங்கள் ஒரு செபியா டோன் விளைவையும் உருவாக்கலாம் அல்லது பிரகாசம் மற்றும் கான்ட்ராஸ்ட்டை சரிசெய்யலாம்.

async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Red
    rgba[i + 1] = gray;   // Green
    rgba[i + 2] = gray;   // Blue
  }

  // Create a new VideoFrame from the modified data.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

2. கணினி பார்வை பயன்பாடுகள்

VideoFrame ப்ளேன்கள் கணினி பார்வை பணிகளுக்குத் தேவையான பிக்சல் டேட்டாவிற்கு நேரடி அணுகலை வழங்குகின்றன. பொருள் கண்டறிதல், முகத்தை அடையாளம் காணுதல், இயக்கத்தைக் கண்காணித்தல் மற்றும் பலவற்றிற்கான அல்காரிதம்களை செயல்படுத்த இந்த டேட்டாவைப் பயன்படுத்தலாம். உங்கள் குறியீட்டின் செயல்திறன்-முக்கியமான பிரிவுகளுக்கு நீங்கள் WebAssembly-ஐப் பயன்படுத்தலாம்.

உதாரணமாக, நீங்கள் ஒரு வண்ண VideoFrame-ஐ கிரேஸ்கேலுக்கு மாற்றி, பின்னர் படத்தில் உள்ள விளிம்புகளை அடையாளம் காண ஒரு விளிம்பு கண்டறிதல் அல்காரிதத்தை (எ.கா., சோபல் ஆபரேட்டர்) பயன்படுத்தலாம். இது பொருள் அங்கீகாரத்திற்கான ஒரு முன்-செயலாக்க படியாகப் பயன்படுத்தப்படலாம்.

3. வீடியோ எடிட்டிங் மற்றும் கம்போசிட்டிங்

வீடியோ எடிட்டிங் அம்சங்களான க்ராப்பிங், ஸ்கேலிங், சுழற்சி மற்றும் கம்போசிட்டிங் போன்றவற்றைச் செயல்படுத்த நீங்கள் VideoFrame ப்ளேன்களைப் பயன்படுத்தலாம். பிக்சல் டேட்டாவை நேரடியாகக் கையாளுவதன் மூலம், நீங்கள் தனிப்பயன் மாற்றங்கள் மற்றும் விளைவுகளை உருவாக்கலாம்.

உதாரணமாக, பிக்சல் டேட்டாவின் ஒரு பகுதியை மட்டும் ஒரு புதிய VideoFrame-க்கு நகலெடுப்பதன் மூலம் ஒரு VideoFrame-ஐ க்ராப் செய்யலாம். நீங்கள் layout ஆஃப்செட்கள் மற்றும் ஸ்ட்ரைடுகளை அதற்கேற்ப சரிசெய்ய வேண்டும்.

4. தனிப்பயன் கோடெக்குகள் மற்றும் டிரான்ஸ்கோடிங்

WebCodecs ஆனது AV1, VP9, மற்றும் H.264 போன்ற பொதுவான கோடெக்குகளுக்கு உள்ளமைக்கப்பட்ட ஆதரவை வழங்கினாலும், தனிப்பயன் கோடெக்குகள் அல்லது டிரான்ஸ்கோடிங் பைப்லைன்களை செயல்படுத்தவும் நீங்கள் இதைப் பயன்படுத்தலாம். நீங்கள் என்கோடிங் மற்றும் டீகோடிங் செயல்முறையை நீங்களே கையாள வேண்டும், ஆனால் VideoFrame ப்ளேன்கள் மூல பிக்சல் டேட்டாவை அணுகவும் கையாளவும் உங்களை அனுமதிக்கின்றன. இது முக்கிய வீடியோ வடிவங்கள் அல்லது சிறப்பு குறியாக்கத் தேவைகளுக்கு பயனுள்ளதாக இருக்கும்.

5. மேம்பட்ட பகுப்பாய்வு

அடிப்படை பிக்சல் டேட்டாவை அணுகுவதன் மூலம், வீடியோ உள்ளடக்கத்தின் ஆழமான பகுப்பாய்வை நீங்கள் செய்ய முடியும். இது ஒரு காட்சியின் சராசரி பிரகாசத்தை அளவிடுதல், மேலாதிக்க வண்ணங்களை அடையாளம் காணுதல், அல்லது காட்சி உள்ளடக்கத்தில் ஏற்படும் மாற்றங்களைக் கண்டறிதல் போன்ற பணிகளை உள்ளடக்கியது. இது பாதுகாப்பு, கண்காணிப்பு அல்லது உள்ளடக்க பகுப்பாய்விற்கான மேம்பட்ட வீடியோ பகுப்பாய்வு பயன்பாடுகளை செயல்படுத்த முடியும்.

கேன்வாஸ் மற்றும் WebGL உடன் பணிபுரிதல்

நீங்கள் VideoFrame ப்ளேன்களில் பிக்சல் டேட்டாவை நேரடியாகக் கையாள முடியும் என்றாலும், நீங்கள் பெரும்பாலும் முடிவை திரையில் ரெண்டர் செய்ய வேண்டும். CanvasImageBitmap இடைமுகம் VideoFrame மற்றும் <canvas> உறுப்புக்கு இடையில் ஒரு பாலத்தை வழங்குகிறது. நீங்கள் ஒரு VideoFrame-லிருந்து ஒரு CanvasImageBitmap-ஐ உருவாக்கி, பின்னர் அதை drawImage() முறையைப் பயன்படுத்தி கேன்வாஸில் வரையலாம்.

async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Release bitmap resources
  videoFrame.close(); // Release VideoFrame resources
}

மேலும் மேம்பட்ட ரெண்டரிங்கிற்கு, நீங்கள் WebGL-ஐப் பயன்படுத்தலாம். நீங்கள் VideoFrame ப்ளேன்களிலிருந்து பிக்சல் டேட்டாவை WebGL டெக்ஸ்ச்சர்களுக்கு பதிவேற்றலாம், பின்னர் விளைவுகள் மற்றும் மாற்றங்களைப் பயன்படுத்த ஷேடர்களைப் பயன்படுத்தலாம். இது உயர் செயல்திறன் கொண்ட வீடியோ செயலாக்கத்திற்கு GPU-ஐப் பயன்படுத்த உங்களை அனுமதிக்கிறது.

செயல்திறன் பரிசீலனைகள்

மூல பிக்சல் டேட்டாவுடன் பணிபுரிவது கணக்கீட்டு ரீதியாக தீவிரமாக இருக்கலாம், எனவே செயல்திறன் மேம்படுத்தலைக் கருத்தில் கொள்வது முக்கியம். இதோ சில குறிப்புகள்:

• நகல்களைக் குறைத்தல்: பிக்சல் டேட்டாவின் தேவையற்ற நகலெடுப்பதைத் தவிர்க்கவும். முடிந்தவரை செயல்பாடுகளை இன்-ப்ளேஸ் செய்ய முயற்சிக்கவும்.
• WebAssembly-ஐப் பயன்படுத்துதல்: உங்கள் குறியீட்டின் செயல்திறன்-முக்கியமான பிரிவுகளுக்கு, WebAssembly-ஐப் பயன்படுத்தக் கருதுங்கள். WebAssembly கணக்கீட்டு ரீதியாக தீவிரமான பணிகளுக்கு gần-native செயல்திறனை வழங்க முடியும்.
• நினைவக தளவமைப்பை மேம்படுத்துதல்: உங்கள் பயன்பாட்டிற்கு சரியான பிக்சல் வடிவம் மற்றும் நினைவக தளவமைப்பைத் தேர்வு செய்யவும். தனிப்பட்ட வண்ணக் கூறுகளை அடிக்கடி அணுகத் தேவையில்லை என்றால், பேக் செய்யப்பட்ட வடிவங்களை (எ.கா., RGBA) பயன்படுத்தக் கருதுங்கள்.
• OffscreenCanvas-ஐப் பயன்படுத்துதல்: பின்னணி செயலாக்கத்திற்கு, பிரதான த்ரெட்டைத் தடுப்பதைத் தவிர்க்க OffscreenCanvas-ஐப் பயன்படுத்தவும்.
• உங்கள் குறியீட்டை சுயவிவரப்படுத்துங்கள்: உங்கள் குறியீட்டை சுயவிவரப்படுத்தவும் செயல்திறன் தடைகளை அடையாளம் காணவும் உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.

உலாவி இணக்கத்தன்மை

WebCodecs மற்றும் VideoFrame API ஆகியவை குரோம், ஃபயர்பாக்ஸ் மற்றும் சஃபாரி உள்ளிட்ட பெரும்பாலான நவீன உலாவிகளில் ஆதரிக்கப்படுகின்றன. இருப்பினும், ஆதரவின் அளவு உலாவி பதிப்பு மற்றும் இயக்க முறைமையைப் பொறுத்து மாறுபடலாம். நீங்கள் பயன்படுத்தும் அம்சங்கள் உங்கள் இலக்கு உலாவிகளில் ஆதரிக்கப்படுகின்றனவா என்பதை உறுதிப்படுத்த MDN Web Docs போன்ற தளங்களில் சமீபத்திய உலாவி இணக்கத்தன்மை அட்டவணைகளைச் சரிபார்க்கவும். குறுக்கு-உலாவி இணக்கத்தன்மைக்கு, அம்சம் கண்டறிதல் பரிந்துரைக்கப்படுகிறது.

பொதுவான ஆபத்துகள் மற்றும் சரிசெய்தல்

VideoFrame ப்ளேன்களுடன் பணிபுரியும் போது தவிர்க்க வேண்டிய சில பொதுவான ஆபத்துகள் இங்கே:

• தவறான தளவமைப்பு: layout வரிசை பிக்சல் டேட்டாவின் நினைவக தளவமைப்பை துல்லியமாக விவரிக்கிறது என்பதை உறுதிப்படுத்தவும். தவறான ஆஃப்செட்கள் அல்லது ஸ்ட்ரைடுகள் சிதைந்த படங்களுக்கு வழிவகுக்கும்.
• பொருந்தாத பிக்சல் வடிவங்கள்: copyTo முறையில் நீங்கள் குறிப்பிடும் பிக்சல் வடிவம் VideoFrame-இன் உண்மையான வடிவத்துடன் பொருந்துகிறது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• நினைவக கசிவுகள்: VideoFrame மற்றும் CanvasImageBitmap ஆப்ஜெக்ட்களை நீங்கள் முடித்த பிறகு எப்போதும் மூடி, அடிப்படை வளங்களை விடுவிக்கவும். அவ்வாறு செய்யத் தவறினால் நினைவக கசிவுகள் ஏற்படலாம்.
• ஒத்திசைவற்ற செயல்பாடுகள்: copyTo ஒரு ஒத்திசைவற்ற செயல்பாடு என்பதை நினைவில் கொள்ளுங்கள். பிக்சல் டேட்டாவை அணுகுவதற்கு முன் நகலெடுப்பு செயல்பாடு முடிவடைகிறது என்பதை உறுதிப்படுத்த await-ஐப் பயன்படுத்தவும்.
• பாதுகாப்புக் கட்டுப்பாடுகள்: குறுக்கு-மூல வீடியோக்களிலிருந்து பிக்சல் டேட்டாவை அணுகும்போது பொருந்தக்கூடிய பாதுகாப்புக் கட்டுப்பாடுகள் குறித்து எச்சரிக்கையாக இருங்கள்.

உதாரணம்: YUV-லிருந்து RGB-க்கு மாற்றுதல்

ஒரு சிக்கலான உதாரணத்தைக் கருத்தில் கொள்வோம்: ஒரு YUV420 VideoFrame-ஐ ஒரு RGB VideoFrame-ஆக மாற்றுதல். இது Y, U, மற்றும் V ப்ளேன்களைப் படித்தல், அவற்றை RGB மதிப்புகளாக மாற்றுதல், பின்னர் ஒரு புதிய RGB VideoFrame-ஐ உருவாக்குதல் ஆகியவற்றை உள்ளடக்கியது.

இந்த மாற்றத்தை பின்வரும் சூத்திரத்தைப் பயன்படுத்தி செயல்படுத்தலாம்:

R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

இதோ குறியீடு:

async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Y plane
    { offset: yPlaneSize, stride: width / 2 }, // U plane
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // V plane
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Release original frame
  return newFrame;
}

இந்த உதாரணம் VideoFrame ப்ளேன்களுடன் பணிபுரிவதன் சக்தி மற்றும் சிக்கலை நிரூபிக்கிறது. இதற்கு பிக்சல் வடிவங்கள், நினைவக தளவமைப்பு மற்றும் வண்ண வெளி மாற்றங்கள் பற்றிய நல்ல புரிதல் தேவை.

முடிவுரை

WebCodecs-இல் உள்ள VideoFrame ப்ளேன் API ஆனது உலாவியில் வீடியோ செயலாக்கத்தின் மீது ஒரு புதிய அளவிலான கட்டுப்பாட்டைத் திறக்கிறது. பிக்சல் டேட்டாவை நேரடியாக அணுகுவது மற்றும் கையாளுவது எப்படி என்பதைப் புரிந்துகொள்வதன் மூலம், நிகழ்நேர வீடியோ விளைவுகள், கணினி பார்வை, வீடியோ எடிட்டிங் மற்றும் பலவற்றிற்கான மேம்பட்ட பயன்பாடுகளை நீங்கள் உருவாக்கலாம். VideoFrame ப்ளேன்களுடன் பணிபுரிவது சவாலானதாக இருந்தாலும், சாத்தியமான வெகுமதிகள் குறிப்பிடத்தக்கவை. WebCodecs தொடர்ந்து உருவாகும்போது, இது சந்தேகத்திற்கு இடமின்றி மீடியாவுடன் பணிபுரியும் வலை டெவலப்பர்களுக்கு ஒரு இன்றியமையாத கருவியாக மாறும்.

VideoFrame ப்ளேன் API-ஐப் பரிசோதிக்கவும், அதன் திறன்களை ஆராயவும் நாங்கள் உங்களை ஊக்குவிக்கிறோம். அடிப்படைக் கொள்கைகளைப் புரிந்துகொண்டு சிறந்த நடைமுறைகளைப் பயன்படுத்துவதன் மூலம், உலாவியில் சாத்தியமானவற்றின் எல்லைகளைத் தள்ளும் புதுமையான மற்றும் செயல்திறன் மிக்க வீடியோ பயன்பாடுகளை நீங்கள் உருவாக்கலாம்.

மேலும் அறிய

• WebCodecs பற்றிய MDN வலை ஆவணங்கள்
• WebCodecs விவரக்குறிப்பு
• GitHub-இல் உள்ள WebCodecs மாதிரி குறியீடு களஞ்சியங்கள்.